<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>确认订单</title>
    <div data-th-replace="layout/head"></div>
</head>
<body>
    <div data-th-replace="layout/common-hade-order"></div>
    <div class="mb20 pb10">
        <div class="container">
            <div class="cm-wbg__bx">
                <div class="order-sub__wrap">
                    <section id="pay-type-list-box">
                        <div class="clearfix">
                            <aside class="pull-right mt5">
                                <span class="c-warning fs12">
                                    <i class="fa fa-warning"></i>
                                     充值订单在支付成功后才会生成订单，商品在支付成功后，会立即开通。偶有数据延时，请支付成功后耐心等待！
                                </span>
                            </aside>
                            <aside class="pull-left">
                                <span class="fs24 c-warning"><i class="fa fa-gift"></i></span>
                                <span class="ml10 fs20 c-333">商品信息</span>
                                <span class="ml10 fs12 c-999">
                                    共<small class="c-warning fs14 shop-num" id="shop-num-box">0</small>件商品
                                </span>
                            </aside>
                        </div>
                        <div class="mt20 pt10 pb10 mb20 ml20 mr20">
                            <section class="row">
                                <article class="col-sm-4">
                                    <div>
                                        <span class="fs16 c-333">商品名称</span>
                                    </div>
                                </article>
                                <aside class="col-sm-3">
                                    <div class="text-center">
                                        <span class="fs16 c-333">价格</span>
                                    </div>
                                </aside>
                                <aside class="col-sm-2">
                                    <div class="text-center">
                                        <span class="fs16 c-333">优惠</span>
                                    </div>
                                </aside>
                                <aside class="col-sm-2">
                                    <div class="text-center">
                                        <span class="fs16 c-333">小计</span>
                                    </div>
                                </aside>
                                <aside th:if="${#strings.isEmpty(shopData)}" class="col-sm-1">
                                    <div class="text-center">
                                        <span class="fs16 c-333">操作</span>
                                    </div>
                                </aside>
                            </section>
                            <div class="order-course-list" id="shop-list-box">

                            </div>
                        </div>
                        <hr/>
                    </section>
                    <section class="pt10">
                        <div class="clearfix pt10">
                            <aside class="pull-left">
                                <span class="fs20 c-warning"><i class="fa fa-credit-card"></i></span>
                                <span class="ml10 fs20 c-333">支付方式</span>
                            </aside>
                        </div>
                        <div class="mt20 pt10 ml20 mr20">
                            <div th:if="${orderType}=='COMMON' and !${#maps.isEmpty(userAccount)}" class="mb20 pb10">
                                <input type="hidden" id="balance" th:value="${userAccount['balance']}"/>
                                <div class="row">
                                    <div class="col-sm-4 user-account-box-1" style="display: block;">
                                        <section data-type="ACCOUNT" class="blank-item pay-type-sel-box">
                                            <div class="text-left ml20 mr20 pt10 pb10">
                                                <h6>
                                                    <span class="fs18 c-warning vam"><i class="fa fa-rmb"></i></span>
                                                    <span class="fs16 c-666 ml5 vam">账户余额</span>
                                                    <span class="ml5 fs18 c-333 vam" th:text="'￥'+${userAccount['balance']}"></span>
                                                    <span class="fs16 c-666 vam">元</span>
                                                </h6>
                                                <div class="mt20 text-right"><span class="fs c-999"><i class="fa fa-check"></i> 可以使用</span></div>
                                            </div>
                                        </section>
                                    </div>
                                    <div class="col-sm-4 user-account-box-2" style="display: none;">
                                        <section class="blank-item noPay">
                                            <div class="text-left ml20 mr20 pt10 pb10">
                                                <h6>
                                                    <span class="fs18 c-999 vam"><i class="fa fa-rmb"></i></span>
                                                    <span class="fs16 c-999 ml5 vam">账户余额</span>
                                                    <span class="ml5 fs18 c-999 vam" th:text="'￥'+(${userAccount['balance']}!=null?${userAccount['balance']}:0)"></span>
                                                    <span class="fs16 c-666 vam">元</span>
                                                </h6>
                                                <div class="mt20 text-right"><span class="fs c-999"><i class="fa fa-times"></i> 余额不足</span></div>
                                            </div>
                                        </section>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <form id="orderForm" style="display: none;">
                                    <input type="hidden" id="orderType" name="orderType" th:value="${orderType}"/>
                                    <input type="hidden" id="bankKey" name="bankKey" value=""/>
                                    <input type="hidden" id="payType" name="payType" value=""/>
                                    <input type="hidden" id="couponCode" name="couponCode" value=""/>
                                    <input type="hidden" id="addressId" name="addressId" value="0"/>
                                    <input type="hidden" id="address" name="address" value=""/>
                                    <input type="hidden" id="activityId" name="activityId" value="0"/>
                                </form>
                                <div th:if="!${#maps.isEmpty(configMap)} and ${configMap['alipayStatus']}=='on'" class="col-sm-4">
                                    <section data-type="ALIPAY" class="blank-item pay-type-sel-box">
                                        <img th:src="@{{path}/common/v3/img/bank/ALIPAY.jpg?v={v}(path=${staticPath},v=${v})}" width="" height="" alt="支付宝支付">
                                    </section>
                                </div>
                                <div th:if="!${#maps.isEmpty(configMap)} and ${configMap['weixinStatus']}=='on'" class="col-sm-4">
                                    <section data-type="WEIXIN" class="blank-item pay-type-sel-box">
                                        <img th:src="@{{path}/common/v3/img/bank/WEIXIN.jpg?v={v}(path=${staticPath},v=${v})}" width="" height="" alt="微信支付">
                                    </section>
                                </div>
                            </div>
                        </div>
                        <hr>
                    </section>

                    <!-- 收货地址列表 -->
                    <section class="pt10" id="user-address-list" style="display: none;">
                    </section>

                    <!--活动，优惠券-->
                    <div style="display: none;" id="activity-code-list">
                        <section class="pt10" id="activity-list-box">
                        </section>
                        <section class="pt10" id="code-list-box">
                        </section>
                    </div>

                    <section class="mt20 pt10 mb20 pb10">
                        <div class="text-right">
                            <p class="hLh30">
                                <span class="c-666">共
                                    <small class="c-danger fs16 shop-num" id="shop-num">0</small>
                                    件商品，商品总金额：
                                </span>
                                <span class="ml20">
                                    <small class="c-danger">
                                        <i class="fa fa-rmb mr5"></i>
                                        <span class="fs16" id="sum-price">0.00</span>
                                    </small>
                                </span>
                            </p>
                            <p class="hLh30 hide" id="coupon-box">
                                <span class="c-666">优惠：</span>
                                <span class="ml20">
                                    <small class="c-danger">
                                        <i class="fa fa-minus mr5"></i>
                                        <span class="fs16" id="yh-price">0.00</span>
                                    </small>
                                </span>
                            </p>
                            <p class="hLh30 hide" id="member-box">
                                <span class="c-666">会员立减：</span>
                                <span class="ml20">
                                    <small class="c-danger">
                                        <i class="fa fa-minus mr5"></i>
                                        <span class="fs16" id="yhm-price">0.00</span>
                                    </small>
                                </span>
                            </p>
                            <p class="hLh30 hide" id="freight-box">
                                <span class="c-666">运费：</span>
                                <span class="ml20">
                                    <small class="c-danger">
                                        <i class="fa fa-plus mr5"></i>
                                        <span class="fs16" id="freight-price">0.00</span>
                                    </small>
                                </span>
                            </p>
                            <p class="hLh30">
                                <span class="c-666">应付：</span>
                                <span class="ml20">
                                    <small class="c-danger fs30" >
                                        <i class="fa fa-rmb fs14 mr5"></i>
                                        <span id="real-price">0.00</span>
                                    </small>
                                </span>
                            </p>
                            <section class="pt10">
                                <button type="button" id="create-order-but" style="width: 180px" class="btn btn-w-m btn-lg btn-danger unRadius">立即支付</button>
                            </section>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <div data-th-replace="layout/footer"></div>
    <script th:src="@{{path}/front/web/business/order/goods/init-pay-order.js?v{v}(path=${staticPath},v=${v})}"></script>
    <script th:src="@{{path}/front/web/business/order/goods/init-address.js?v{v}(path=${staticPath},v=${v})}"></script>
    <script th:inline="javascript" type="text/javascript">
        var orderType = [[${orderType}]];
        var shopData = [[${shopData}]];
    </script>
</body>
</html>